import React from 'react'
import { Table, Tag, Space } from 'antd';
const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: text => <a>{text}</a>,
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '子女',
      key: 'child',
      dataIndex: 'child',
      align:'center',
      render: child => (
        <>
          {child.length>0?child.map((item,index) => {
            let color = index > 0 ? 'geekblue' : 'green';
          
            return (
              <Tag color={color} key={item}>
                {item}
              </Tag>
            );
          }):<a>暂无子女</a>}
        </>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <a>新增{record.name}子女</a>
          <a>编辑信息</a>
        </Space>
      ),
    },
  ];
  
  const data = [
    {
      key: '1',
      name: '李伟峰',
      age: 32,
      phone: '17803899593',
      child: ['李倾岚', '李莘璇'],
    },
    {
      key: '2',
      name: '陈兰兰',
      age: 28,
      phone: '18538521373',
      child: ['李倾岚', '李莘璇'],
    },
    {
      key: '3',
      name: '任锐',
      age: 32,
      phone: '13526010592',
      child: [],
    },
  ];

export default function EditTree() {
    return (
        <div>
            <Table columns={columns} dataSource={data} />
        </div>
    )
}
